{% load staticfiles %}

<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
    <link rel="stylesheet" href="{% static 'css/app.css' %}">

    <div id="logo-header" align="center">
        <div id="img-logo" align="center">
            <img src="{% static 'logo.png' %}">
        </div>
        <div id="search-bar" align="center">
            <form id="searchform" method="get" accept-charset="utf-8" action="/search/">
                <input class="searchfield" id="searchbox" name="q" type="text" placeholder="Look for a movie">
                <button class="searchbutton" type="submit">Search</button>
            </form>
        </div>
    </div>
    <div id="similar-to-liked">
        <h1>Similar to movies you liked!</h1>
        <ul id="liked_menu" style="list-style-type:none">
            {% if liked|length == 0 %}
            Like more movies to see recommendations here
            {% else %}
            {% for movie in liked %}

            <li><a href="/{{ movie.movie_id }}/"> {{ movie.title }}</a></li><br>

            {% endfor %}
            {% endif %}
        </ul>
    </div>
    <div id="similar-to-not-liked">
        <h1>Let some of these surprise you!</h1>
        <ul id="not_liked_menu" style="list-style-type:none">
            {% if not_liked|length == 0 %}
            Dislike movies to see well received similar movies here (maybe they got it right making these movies!)
            {% else %}
            {% for movie in not_liked %}

            <li><a href="/{{ movie.movie_id }}/"> {{ movie.title }}</a></li><br>

            {% endfor %}
            {% endif %}
        </ul>
    </div>
    <div id="unrelatable">
        <h1>What's life without a little randomness?</h1>
        <ul id="random_menu" style="list-style-type:none">
            {% for movie in random %}

            <li><a href="/{{ movie.movie_id }}/"> {{ movie.title }}</a></li><br>

            {% endfor %}
        </ul>
    </div>
</body>
</html>